<template>
  <div class="site-header">
    <div class="container">
      <div class="header-log">
        <a href="https://www.mi.com/" class="logo" title="小米官网">
          <img src="../../assets/imgs/logo.png" alt="" />
        </a>
      </div>
      <div class="header-nav">
        <ul class="nav-list clearfix">
          <li class="nav-category">
            <a href="https://www.mi.com/" class="link-category"></a>
          </li>
          <li
            class="nav-item"
            v-for="(item, i) in li_list"
            :key="i"
            @mouseenter="showDownList(i)"
          >
            <a href="https://www.mi.com/" class="link">
              <span>{{ item.text }}</span>
            </a>
          </li>
          
        </ul>
      </div>
      <div class="header-search clearfix">
        <form action="" class="search-form clearfix">
          <!-- <label for="search" class="hide">站内搜索</label> -->
          <a class="no-style-msq">
            <input
              class="search-text input-hover"
              type="search"
              id="search"
              name="keyword"
              @click="changeBorderColor"
              @blur="backBorderColor"
            />
          </a>
          <a id="J_submitBtn" class="no-style-msq">
            <input
              type="submit"
              class="search-btn input-hover"
              value="Search"
            />
          </a>
        </form>
      </div>
    </div>
    <!-- v-show="isActive" -->
    <div class="header-nav-menu"  @mouseleave="closeDownMenu" :style="'height:'+ height+'px'">
      <div class="container_down">
        <ul class="children-list clear-fix">
          <li
            :class="!i1 ? 'first' : ''"
            v-for="(item1, i1) in more_list"
            :key="i1"
          >
            <a href="" target="_blank">
              <div class="figure figure-thumb">
                <img
                  :src="item1.img"
                  alt="小米10至尊纪念版"
                  width="160"
                  height="110"
                />
              </div>
              <div class="title">{{ item1.title }}</div>
              <p class="price">{{item1.price}}</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="header-nav-menu" style="display: none"></div> -->
  </div>
</template>

<script>
export default {
  name: "SiteHeaderbar",
  data() {
    return {
      li_list: [
        {
          id: 0,
          text: "小米手机",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊纪念版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10小米10至尊纪念版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10小米10至尊纪念版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10小米10至尊纪念版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10小米10至尊纪念版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10小米10至尊纪念版",
              price: "4999元起",
            },
          ],
        },
        {
          id: 1,
          text: "Redmi红米",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10",
              price: "4999元起",
            },
          ],
        },
        {
          id: 2,
          text: "电视",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "小米10笔记本",
              price: "5999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊纪念版",
              price: "49199元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊纪念版",
              price: "49993元起",
            },
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "Red Mi G",
              price: "4999元起",
            },
          ],
        },
        {
          id: 3,
          text: "笔记本",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "Red Mi G",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "Red Mi G",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "Red Mi G",
              price: "4999元起",
            },
          ],
        },
        {
          id: 4,
          text: "家电",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊版",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊版",
              price: "4999元起",
            },
          ],
        },
        {
          id: 5,
          text: "路由器",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10至尊版",
              price: "4999元起",
            },
          ],
        },
        {
          id: 6,
          text: "智能硬件",
          show_more_list: false,
          children_list: [
            {
              img: require("../../assets/imgs/phone.png"),
              title: "小米10",
              price: "4999元起",
            },
            {
              img: require("../../assets/imgs/laptop.png"),
              title: "小米10至尊版",
              price: "4999元起",
            },
          ],
        },
        {
          id: 7,
          text: "服务",
          show_more_list: false,
        },
        {
          id: 8,
          text: "社区",
          show_more_list: false,
        },
      ],
      boder_color: "ff6700",
      // 保存鼠标经过的nav-item 的 id
      selected_num: "",
      // 通过ID去获取相应的children数据
      more_list: [],
      // 下拉商品是否显示
      // isActive: false,
      // 下拉高度
      height: 0
    };
  },
  methods: {
    // 搜索框的边框显示
    changeBorderColor() {
      // console.log(document.getElementsByTagName('input')[0]);
      document.getElementsByTagName(
        "input"
      )[0].style.border = `1px solid #ff6700`;
      document.getElementsByTagName(
        "input"
      )[1].style.border = `1px solid #ff6700`;
    },
    // 搜索框的显示
    backBorderColor() {
      document.getElementsByTagName(
        "input"
      )[0].style.border = `1px solid  rgba(118, 118, 118, 0.5)`;
      document.getElementsByTagName(
        "input"
      )[1].style.border = `1px solid  rgba(118, 118, 118, 0.5)`;
    },
    // 鼠标经过标题，显示下面的商品
    showDownList(i) {
      // console.log(typeof(i));
      if(i > 6 ){
        this.height = 0;
      }else{
        this.height = 229;
        this.selected_num = i;
        console.log(i);
        this.more_list = this.li_list[i].children_list;
      }
      
    },
    closeDownMenu(){
      this.height = 0
    }
  },
};
</script>

<style lang="less" scoped>
// header的第三部分
.site-header {
  position: relative;
  z-index: 20;
  height: 100px;
  top: 120px;
  .container {
    position: relative;
    width: 1226px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    .header-log {
      float: left;
      width: 62px;
      margin-top: 22px;
      .logo {
        position: relative;
        display: block;
        width: 55px;
        height: 55px;
        overflow: hidden;
        background-color: #ff6700;
      }
    }
  }
  .container::before,
  .container::after {
    content: " ";
    display: table;
  }
}
// 中间的商品。
.header-nav {
  float: left;
  width: 850px;
  .nav-list {
    position: relative;
    z-index: 10;
    float: left;
    width: 1100px;
    height: 88px;
    margin: 0;
    padding: 12px 0 0 30px;
    list-style-type: none;
    font-size: 16px;
    .nav-item {
      float: left;
      height: 88px;

      .link {
        display: block;
        padding: 26px 10px 38px;
        color: #333;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
      }
      .link:hover {
        color: #ff6700;
        transition: 0.4s;
      }
      
    }
  }
}
.nav-category {
  position: relative;
  float: left;
  width: 82px;
  padding-right: 15px;
  list-style-type: none;
  .link-category {
    display: block;
    padding: 26px 0 38px;
    text-align: right;
    color: #333;
  }
}

// 搜索
.header-search {
  float: right;
  width: 296px;
  margin-top: 25px;
  .search-form {
    position: relative;
    width: 297px;
    height: 50px;
    z-index: 20;
    // border: 2px solid #000;
  }
}
.search-text {
  position: absolute;
  top: 0;
  border: 1px solid #e0e0e0;
  outline: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  right: 51px;
  z-index: 1;
  width: 223px;
  height: 48px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 48px;
}
input {
  // -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: textfield;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  font: 400 13.3333px Arial;
  padding: 1px 2px;
  // border-width: 2px;
  border-style: inset;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
}
input[type="search"] {
  box-sizing: content-box;
  height: 48px;
  width: 223px;
  padding: 0 10px;
  border: 1px solid rgba(118, 118, 118, 0.5);
  outline: none;
}
input[type="submit"] {
  box-sizing: content-box;
  height: 46px;
  width: 38px;
  padding: 1px 6px;
  border: 1px solid rgba(118, 118, 118, 0.5);
  outline: none;
  float: right;
  background: #fff;
  text-align: center;
}
input[type="submit"]:hover {
  background: #ff6700;
  color: #fff;
  transition: 0.4s;
}

// 鼠标经过的下拉菜单
.header-nav-menu {
  // display: none;
  height: 229px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  transition: 0.4s;
  background: #fff;

  position: absolute;
  top: 100px;
  left: 0;
  z-index: 24;
  width: 100%;
  // height: 0;
  border-top: 1px solid #e0e0e0;
  overflow: hidden;

  .container_down {
    position: relative;
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    .children-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 12px;
      li {
        position: relative;
        float: left;
        width: 180px;
        height: 100%;
        padding: 35px 12px 0;
        text-align: center;
        transition: 0.4s;
      }
      li:before {
        position: absolute;
        left: 0;
        top: 35px;
        z-index: 1;
        width: 1px;
        height: 100px;
        content: "";
        background-color: #e0e0e0;
      }
      .first::before {
        display: none;
      }
      .figure-thumb {
        width: 160px;
        height: 110px;
        margin: 0 auto 16px;
        text-align: center;
        img {
          width: 160px;
          height: 110px;
        }
        a {
          display: block;
        }
      }

      .title {
        margin: 0;
        line-height: 20px;
        color: #333;
      }

      .price {
        margin: 0;
        line-height: 20px;
        color: #ff6700;
      }
    }
  }
}
.first:first-child:before {
  display: none;
}

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
</style>